{% extends 'layout/basic.html' %}
{% load static %}
{% block title %} 我的订单 {% endblock %}

{% block content %}
    <div class="container">
        <table class="table ">
            <thead>
            <tr>
                <th>订单编号</th>
                <th>数量</th>
                <th>单价</th>
                <th>实付款</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for order in order_list %}
                <tr>
                    <td>{{ order.order }}</td>
                    <td>{{ order.count }}</td>
                    <td>{{ order.price_policy.price }}￥</td>
                    <td>{{ order.price }}￥</td>
                    {% if  order.status == 1 %}
                        <td style="color:red;">{{ order.get_status_display }}</td>
                        <td><a href="{% url 'pay_now' transaction_id=order.id %}"
                               class="btn btn-xs btn-primary">立即支付</a>
                            <a href="#" class="btn btn-xs btn-danger" data-toggle="modal"
                               data-target="#delModal"
                               data-oid="{{ order.id }}">取消订单</a></td>
                    {% else %}
                        <td style="color:green;">{{ order.get_status_display }}</td>
                        <td></td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <nav aria-label="...">
            <ul class="pagination" style="margin-top: 0;">
                {{ page_html|safe }}
            </ul>
        </nav>
    </div>
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>确认取消此订单?</h4>
                <p>取消订单之后将不会被恢复！</p>
                <p style="text-align: right">
                    <button type="button" class="btn btn-danger" id="delBtn">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </p>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            initDelModal();
        })
        function initDelModal() {
            $('#delModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var oid = button.data('oid');
                var modal = $(this);
                // 找到确认按钮的id 为此添加一个属性 oid = oid 订单id
                $('#delBtn').attr('oid', oid)
            })
        }

                // 删除操作
        $('#delBtn').click(function () {
            // 获取要删除的订单的id
            $.ajax({
                url: '{% url 'cancel_order'  %}',
                type: 'get',
                data: {'oid': $(this).attr('oid')},
                success: function (data) {
                    if (data.status) {
                        location.href = location.href
                    }

                }
            })
        })
    </script>
{% endblock %}
